<template>
  <div class="user-account">
    <el-form ref="accountForm" :model="account" label-width="80px" label-position="left">
      <el-form-item label="Nickname">
        <el-input class="account-form-item" v-model.trim="account.nickname" />
      </el-form-item>
      <el-form-item label="Gender">
        <el-radio-group class="account-form-item" v-model="account.gender">
          <el-radio v-for="item in genderOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Phone">
        <el-input class="account-form-item" v-model.trim="account.phone" disabled />
        <el-button class="update" @click="phoneVisible = true">Update</el-button>
        <el-button type="danger" @click="handleDeletePhone">Delete</el-button>
      </el-form-item>
      <el-form-item label="Email">
        <el-input class="account-form-item" v-model.trim="account.email" disabled />
        <el-button class="update" @click="emailVisible = true">Update</el-button>
        <el-button type="danger" @click="handleDeleteEmail">Delete</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAccountUpdate">Update</el-button>
        <el-button @click="passwordVisible = true">Update Password</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="Update Phone" width="25%" v-model="phoneVisible" :before-close="confirmCancelPhone">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="Password">
          <el-input type="password" v-model="phonePassword" :show-password="true" />
        </el-form-item>
        <el-form-item label="Phone">
          <el-input v-model="phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="handleClosePhone">取 消</el-button>
          <el-button type="primary" @click="handleUpdatePhone">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="Update Email" width="25%" v-model="emailVisible" :before-close="confirmCancelEmail">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="Password">
          <el-input type="password" v-model="emailPassword" :show-password="true" />
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="email" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="handleCloseEmail">取 消</el-button>
          <el-button type="primary" @click="handleUpdateEmail">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="Update Password" width="30%" v-model="passwordVisible" :before-close="confirmCancelPassword">
      <el-form ref="passwordFormRef" label-width="120px" label-position="left" :model="passwordForm">
        <el-form-item label="OldPassword" prop="oldPassword" :rules="passwordForm.password">
          <el-input type="password" v-model="passwordForm.oldPassword" :show-password="true" />
        </el-form-item>
        <el-form-item label="NewPassword" prop="newPassword" :rules="formRules.password">
          <el-input type="password" v-model="passwordForm.newPassword" :show-password="true" />
        </el-form-item>
        <el-form-item label="Confirm" prop="confirmPassword" :rules="formRules.confirm">
          <el-input type="password" v-model="passwordForm.confirmPassword" :show-password="true" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="handleClosePassword">取 消</el-button>
          <el-button type="primary" @click="handleUpdatePassword">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  import { userService } from '@/services/authorization/User';
  import { ObjectUtil } from '@/utils/ObjectUtil';
  import { defineComponent, reactive, ref } from 'vue';
  import { Info } from '@/store/modules/account/info';
  import { ElMessage } from 'element-plus';
  import { useStore } from 'vuex';
  import { useUpgradePassword } from '@/views/profile/components/hooks/useUpgradePassword';
  import { ELForm } from '@/utils/types';
  import { useUpgradePhone } from '@/views/profile/components/hooks/useUpgradePhone';
  import { useUpgradeEmail } from '@/views/profile/components/hooks/useUpgradeEmail';

  export default defineComponent({
    setup() {
      const store = useStore();
      const account: Info = reactive(ObjectUtil.clone(store.getters['account/info']));

      const refresh = () => {
        console.log(store.getters['account/info']);
        Object.assign(
          account,
          {
            nickname: null,
            gender: null,
            phone: null,
            email: null,
          },
          ObjectUtil.clone(store.getters['account/info'])
        );
      };

      const handleAccountUpdate = async () => {
        try {
          await userService.update({
            id: account.id,
            nickname: account.nickname,
            gender: account.gender,
          });
          await store.dispatch('account/upgrade');
          ElMessage({
            message: 'User information has been updated successfully',
            type: 'success',
            duration: 5 * 1000,
          });
        } catch (e) {
          ElMessage.error((e as Error).message);
        } finally {
          refresh();
        }
      };
      const passwordFormRef = ref(null as ELForm | null);
      const {
        confirmCancelPassword,
        confirmPassword,
        formRules,
        handleClosePassword,
        handleUpdatePassword,
        newPassword,
        oldPassword,
        visible: passwordVisible,
      } = useUpgradePassword(passwordFormRef);
      const {
        confirmCancelPhone,
        handleClosePhone,
        handleDeletePhone,
        handleUpdatePhone,
        password: phonePassword,
        phone,
        visible: phoneVisible,
      } = useUpgradePhone(refresh);
      const {
        confirmCancelEmail,
        email,
        handleCloseEmail,
        handleDeleteEmail,
        handleUpdateEmail,
        password: emailPassword,
        visible: emailVisible,
      } = useUpgradeEmail(refresh);
      return {
        account,
        handleAccountUpdate,
        genderOptions: [
          {
            label: '男',
            value: false,
          },
          {
            label: '女',
            value: true,
          },
        ],
        passwordFormRef,
        passwordForm: {
          oldPassword,
          newPassword,
          confirmPassword,
        },
        passwordVisible,
        formRules,
        handleClosePassword,
        confirmCancelPassword,
        handleUpdatePassword,
        phoneVisible,
        phonePassword,
        phone,
        confirmCancelPhone,
        handleClosePhone,
        handleDeletePhone,
        handleUpdatePhone,
        emailVisible,
        emailPassword,
        email,
        confirmCancelEmail,
        handleCloseEmail,
        handleDeleteEmail,
        handleUpdateEmail,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .user-account {
    .account-form-item {
      width: 30%;
    }

    .update {
      margin-left: 10px;
      /*color: #606266;*/
      /*background-color: #e0e0e0;*/
      /*border-color: #e0e0e0;*/

      /*&:hover {*/
      /*	color: #606266;*/
      /*	background-color: #e8e8e8;*/
      /*	border-color: #e8e8e8;*/
      /*}*/
    }

    .captcha {
      &:hover {
        color: #505050;
      }
    }
  }
</style>
